<template>
	<div class="max">
		<my-header :backBtn="true"></my-header>
		<div class="max tc payTip" style="margin-top: 5rem;" v-if="payStatus.residue<=0">
			暂无数据，该功能需<router-link to="/product"><span class="red">缴费</span></router-link>后使用
		</div>

		<div class="tc payTip payTip_1" v-if="payStatus.residue>0&&payStatus.status==0">
			（试用期还有{{payStatus.residue}}天，如需继续使用该功能，请尽快<router-link to="/product"><span class="red">缴费</span></router-link>）
		</div>
		<template v-if="payStatus.residue>0">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">日期</label></div>
				<div class="weui-cell__bd">
					<input class="weui-input" @change="queryFn" v-model="params.day" type="date" />
				</div>
			</div>
			<div class="cont">
				<div class="weui-panel tl">
					<div class="weui-panel__bd">
						<div class="weui-loadmore weui-loadmore_line" v-if="list.length===0">
							<span class="weui-loadmore__tips">暂无数据</span>
						</div>
						<div class="weui-panel">
							<div class="weui-panel__bd">
								<div class="weui-media-box weui-media-box_appmsg" v-for="item in list">
                  <div class="weui-media-box__hd" @click="check(item.studentAvatar)">
                    <img class="weui-media-box__thumb" :src="item.studentAvatar">
									</div>
									<div class="weui-media-box__bd">
										<h4 class="weui-media-box__title">{{item.studentName}}</h4>
										<ul class="weui-media-box__info">
											<li class="weui-media-box__info__meta">{{item.clazzName}}</li>
                      <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">时间：{{item.signTime.split(' ')[1]}}</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<a href="javascript:void(0);" class="weui-cell weui-cell_link" v-if="params.pages>params.current">
						<div class="weui-cell__bd" @click="loadmore">查看更多</div>
					</a>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	import wx from "weixin-js-sdk";

	export default {
		components: {},
		data() {
			let time = this.$getNowDate('date');
			return {
				params: {
					current: 1,
					size: 10,
					pages: 0,
					direction: 0,
					day: time,
				},
				list: [],
				payStatus: {}
			}
		},
		methods: {
			getPayStatus() {
				this.$http.getPayStatus().then(resp => {
					this.payStatus = resp.data;
          if (this.payStatus.residue > 0) {
            this.queryFn();
          }
				})
			},
			loadmore() {
				this.params.size += 10;
				this.queryFn();
			},
			saveR() {
				this.$saveR(this.selectForm)
			},
			queryFn() {
				this.$http.fetchStudentRecordForKinsfolk(this.params).then(resp => {
					let data = resp.data;
					this.list = data.records;
					this.params.current = data.current;
					this.params.size = data.size;
					this.params.pages = data.pages;
				})
			},
			check(url) {
				if (!url) {
					return;
				}
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
			getWxConfig() {
				let url = window.location.href;

				let _this = this;
				_this.$http.fetchWxConfig({
					url: url
				}).then(resp => {
					wx.config({
						// debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['previewImage'] // 必填，需要使用的JS接口列表
					});
				})
			},
		},
		created() {
			this.getPayStatus();
		},
		mounted() {
			this.getWxConfig();

		},

	}
</script>

<style scoped>
	.attendCount {
		padding: 1rem;
		box-sizing: border-box;
	}

	.select-rasult {
		padding: 1rem 0;
		color: #B2B2B2;
	}

	.attendCount-table {
		height: calc(100% - 7.5rem);
		width: 100%;
		overflow: auto;
	}

	.count-table thead {
		background: #D9D9D9;
		padding: 0.5rem 0;
	}

	.count-table td {
		padding: 0.5rem 0;
	}

	.count-table tr {
		border-bottom: 1px solid #D9D9D9;
	}

	.attendType {
		width: calc(100% - 8rem);
		margin-bottom: 1rem;
		flex-wrap: wrap;
	}

	.attendType span {
		font-size: 1.4rem;
		margin: 0 0.2rem;
		padding: 0.1rem 0.5rem;
		border-radius: 5px;
	}

	.attendType span.active {
		background: #2aa7e1;
		color: #fff;
	}
</style>
